<template>
	<view class="pushProfit-scroll">
		<view class="title">
			<view class="sort-bar">
				<view v-for="(x,y) in sorts" :key="y" :class="{'selected' : y == selected}" @click="select(y)">{{x}} <text v-if="y==0" class="right"> {{mine.length}}</text><text class="right" v-if="y==1"> 6</text></view>
			</view>
		</view>
		<view class="box">
			<swiper  :current="selected" @change="current" class="swiper">
				<swiper-item>
						<!-- 我的邀请 -->
						<pushProfit-mine :mine="mine"></pushProfit-mine>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">22</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import mines from '../pushProfit-mine/pushProfit-mine.vue'
	export default {
		components:{
			mines
		},
		data() {
			return {
				selected:0,
				mine:[
					{
						id:88888888888,
						achievement:6666666,
						date:'2021-06-03',
						time:'12:00'
					},
					{
						id:88888888888,
						achievement:6666666,
						date:'2021-06-03',
						time:'12:00'
					},
					{
						id:88888888888,
						achievement:6666666,
						date:'2021-06-03',
						time:'12:00'
					},
					{
						id:88888888888,
						achievement:6666666,
						date:'2021-06-03',
						time:'12:00'
					},
					{
						id:88888888888,
						achievement:6666666,
						date:'2021-06-03',
						time:'12:00'
					},
					{
						id:88888888888,
						achievement:6666666,
						date:'2021-06-03',
						time:'12:00'
					},
					{
						id:88888888888,
						achievement:6666666,
						date:'2021-06-03',
						time:'12:00'
					},
					{
						id:88888888888,
						achievement:6666666,
						date:'2021-06-03',
						time:'12:00'
					},
					{
						id:88888888888,
						achievement:6666666,
						date:'2021-06-03',
						time:'12:00'
					},
					{
						id:88888888888,
						achievement:6666666,
						date:'2021-06-03',
						time:'12:00'
					},
					{
						id:88888888888,
						achievement:6666666,
						date:'2021-06-03',
						time:'12:00'
					},
				],
			};
		},
		methods:{
			select(x) {
				this.selected = x
			},
			current(e) {
				this.selected = e.detail.current;
			},
			},
			created() {
				var reg=/(\d{3})\d{4}(\d{4})/; //正则表达式
				for (let a of this.mine){
					var ids=""+ a.id
					a.id=ids.replace(reg, "$1****$2")
				}
			},
			computed:{
				sorts(){
				return	[
						this.$t('mine.push.invitation'),
						this.$t('mine.push.GVXX'),
					]
				}
			}
	}
</script>

<style scoped>
.sort-bar {
		width: 80vw;
		height: 60rpx;
		display: flex;
		color: black;
		font-weight: 550;
		margin:10rpx auto;
		position: relative;
	}
	
	.sort-bar>view {
		width: 30%;
		height: 100%;
		font-size: 1em;
		line-height: 60rpx;
		text-align: center;
		margin: auto;
	}
	.sort-bar>view>text:nth-of-type(1){
		position: relative;
		top: 0px;
		left: 4rpx;
	}
	
	.selected {
		font-weight: 700;
		border-bottom: 8rpx #207DFE solid;
		border-radius: 4rpx;
	}
	scroll-view {
		width: 96vw;
		margin: auto;
		height: calc(80vh - 100rpx);
	}
	
	.swiper {
		width: 100vw;
		height: calc(80vh - 100rpx);
		margin:30rpx auto;
	}
	swiper-item{
		width: 100%;
	}
	.title{
		 margin: -6rpx 60rpx;
		display: flex;
		justify-content: space-between;
	}
	.box{
			width: 100%;
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #F3F3F3;
			font-size: .95em;
			background-color: #FFFFFF;
		}
		.box>text:nth-of-type(1){
			position: relative;
			left: 100rpx;
			 font-weight: 500; 
			 line-height: 60rpx;
		}
		.box>text:nth-of-type(2){
			position: relative;
			left: 24rpx;
			 font-weight: 500; 
			 line-height: 60rpx;
		}
		.box>text:nth-of-type(3){
			position: relative;
			left: -40rpx;
			font-size: .8em;
			opacity: .7;
			line-height: 60rpx;
		}
</style>
